Day 8 - 清單與表格的魔法 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2025 iThome 鐵人賽

DAY 8

Modern Web

程式煉金術：Bug退散！前端驅魔記系列第 8 篇

Day 8 - 清單與表格的魔法

17th鐵人賽 30dayshtml

joanna2005823

團隊nutc imac

2025-09-22 14:36:06

69 瀏覽

分享至

學習目標

熟悉三種清單：有序清單 <ol>、無序清單 <ul>、描述清單 <dl>
能靈活使用 <li> 條列內容
學會建立表格 <table>，理解 <tr>、<th>、<td>
認識表格結構標籤：<thead>、<tbody>、<tfoot>
嘗試建立一個簡單的課表或待辦清單

重點觀念（資訊整理的工具）

清單 = 條列重點：<ul> 常用於導航或條列，<ol> 用於排序步驟，<dl> 適合解釋與定義。
表格 = 結構化資料：用來呈現「格狀資訊」，不是拿來排版（排版用 CSS）。
分清表頭與內容：<th> 表示標題欄位，<td> 表示一般資料。
語意化結構：表格應該用 <thead>/<tbody>/<tfoot> 區分，讓資料更清楚。

清單與表格示範

<body>
  <h1>Day 8 Demo</h1>
  <h2>清單示範</h2>
  <h3>無序清單</h3>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

  <h3>有序清單</h3>
  <ol>
    <li>打開電腦</li>
    <li>打開 VS Code</li>
    <li>開始寫程式</li>
  </ol>

  <h3>描述清單</h3>
  <dl>
    <dt>HTML</dt><dd>網頁的骨架</dd>
    <dt>CSS</dt><dd>網頁的樣式</dd>
    <dt>JavaScript</dt><dd>網頁的互動</dd>
  </dl>

  <h2>表格示範</h2>
  <table border="1">
    <thead>
      <tr>
        <th>時間</th>
        <th>課程</th>
        <th>老師</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>09:00</td>
        <td>HTML 基礎</td>
        <td>王老師</td>
      </tr>
      <tr>
        <td>10:30</td>
        <td>CSS 樣式</td>
        <td>李老師</td>
      </tr>
    </tbody>
    <tfoot>